<!--conf
<sample in_favorites="true">
               <product version="1.4" edition="std"/>
                       <modifications>
                               <modified date="070101"/>
                       </modifications>
               <sampledescription><![CDATA[dhtmlxGrid can have more than one row in header and these rows can be used to place content which is more complex than just a column lable.]]></sampledescription></sample>
 --> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Complex content in header</title>
	
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.js"></script>
</head>

<body onLoad="doOnLoad()">
	<h1>Complex content in header</h1>
	<p>Setting complex content to header</p>
	
	<div id="gridbox" style="width:600px; height:300px; background-color:white;"></div>
	
	<ul>
		<li>Complex objects to use in grid header can be created in invisible container and attached to div elements in grid header after loading grid. 
		Otherwise they can be created using script on the fly.</li>
		<li>Example of functions which can be usefull for filtering grid content (used in current sample):</li>
	</ul>
	<div style="display:none">
	<div id="title_flt_box"><input type="text" style="width: 100%; border:1px solid gray;" onClick="(arguments[0]||window.event).cancelBubble=true;" onKeyUp="filterBy()"></div>
	<div id="author_flt_box"><select style="width:100%" onclick="(arguments[0]||window.event).cancelBubble=true;" onChange="filterBy()"></select></div>
</div>

<script>
		function doOnLoad(){
			mygrid = new dhtmlXGridObject('gridbox');
			mygrid.setImagePath("../../../codebase/imgs/");
		    mygrid.setHeader("Sales,Title,Author,Price,In Store,Shipping,Bestseller,Published");
			mygrid.setInitWidths("50,150,150,80,80,80,80,200")
			mygrid.setColAlign("right,left,left,right,center,left,center,center")
			mygrid.setColTypes("dyn,ed,ed,price,ch,co,ra,ro");
		    mygrid.getCombo(5).put(2,2);
			mygrid.setColSorting("int,str,str,int,str,str,str,str")
			mygrid.setColumnColor("white,#d5f1ff,#d5f1ff")
		    mygrid.setColumnMinWidth(50,0);
			mygrid.setSkin("dhx_skyblue")
			mygrid.init();
			mygrid.loadXML("../common/grid.xml", function(){
				mygrid.attachHeader("#rspan,<div id='title_flt' style='padding-right:3px'></div>,<div id='author_flt' style='padding-right:3px'></div>,#rspan,#rspan,#rspan,#rspan,#rspan");
				//set title filter field
				document.getElementById("title_flt").appendChild(document.getElementById("title_flt_box").childNodes[0])
				//set author fiter field
				var authFlt = document.getElementById("author_flt").appendChild(document.getElementById("author_flt_box").childNodes[0]);
				populateSelectWithAuthors(authFlt);
				//block sorting and resize actions for second row
				mygrid.hdr.rows[2].onmousedown=mygrid.hdr.rows[2].onclick=function(e){(e||event).cancelBubble=true;}
				mygrid.setSizes();
			});
		}
		function filterBy(){
			var tVal = document.getElementById("title_flt").childNodes[0].value.toLowerCase();
			var aVal = document.getElementById("author_flt").childNodes[0].value.toLowerCase();
			
			for(var i=0; i< mygrid.getRowsNum();i++){
				var tStr = mygrid.cells2(i,1).getValue().toString().toLowerCase();
				var aStr = mygrid.cells2(i,2).getValue().toString().toLowerCase();
				if((tVal=="" || tStr.indexOf(tVal)==0) && (aVal=="" || aStr.indexOf(aVal)==0))
					mygrid.setRowHidden(mygrid.getRowId(i),false)
				else
					mygrid.setRowHidden(mygrid.getRowId(i),true)
			}
		}
		function populateSelectWithAuthors(selObj){
			selObj.options.add(new Option("All Authors",""))
			var usedAuthAr = new dhtmlxArray();
			for(var i=0;i<mygrid.getRowsNum();i++){
				var authNm = mygrid.cells2(i,2).getValue();
				if(usedAuthAr._dhx_find(authNm)==-1){
					selObj.options.add(new Option(authNm,authNm))
					usedAuthAr[usedAuthAr.length] = authNm;
				}
			}
		}
		
	</script>
</body>
</html>
